/*
  用法：
    <yl-picker isShow="{{countyIsShow}}" value="{{countyArray}}" title="选择国家" default-index="2" bind:sure="citySure"></yl-picker>
  Props
    value                 数据源
    value-key             要显示内容对应的key
    title                 标题
    is-show               是否展示
    default-index         单项选择器-默认选中第几行
    close-click-overlay   是否在点击遮罩层后关闭
    z-index               层级
    default-array         多项选择器-默认选中第几行
  Events
    confirm                确定
    cancel                 取消
    change                 滑动时
    click-overlay          点击背景遮罩层触发
  Slot
    无
  外部样式类
    无
*/

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 数据源
    value: {
      type: Array,
      value: [],
      observer: "updateData",
    },
    //  标题
    title: {
      type: String,
      value: "",
    },
    // 数据源中每项的key
    valueKey: {
      type: String,
      value: "",
    },
    // 是否展示
    isShow: {
      type: Boolean,
      value: false,
    },
    // 是否在点击遮罩层后关闭
    closeClickOverlay: {
      type: Boolean,
      value: true,
    },
    // 层级
    zIndex: {
      type: Number,
      value: 100,
    },
    // 多项选择器-默认选中第几行
    defaultArray: {
      type: Array,
      value: [],
      observer: "updateData",
    },
    // 单项选择器-默认选中第几行
    defaultIndex: {
      type: Number,
      value: 0,
      observer: "updateIndexData",
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    simple: false,
    list:[],//数据源
    defaultList: [],
  },
  lifetimes: {
    // 在组件实例进入页面节点树时执行
    attached: function () {
    },
    // 在组件实例被从页面节点树移除时执行
    detached: function () {},
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 更新选中
    updateIndexData(val) {
      this.data.defaultArray.push(val);
      var defaultList = this.data.defaultList;
      defaultList = this.data.defaultArray
      this.setData({
        defaultList
      })
    },
    updateData(val) {
      // 处理数据，如果是一列数组，嵌套values
      var temp = this.columns(this.data.value);
      this.data.value = temp;
      var detaultTemp = this.data.defaultArray;
      // 如果没有设置默认选中，默认第一行
      if (detaultTemp.length == 0) {
        temp.map(function () {
          detaultTemp.push(0);
        });
      }
      this.setData({
        list: temp,
        defaultList: detaultTemp,
      });
    },
    columns(columns) {
      if (!columns) {
        return [];
      }
      // 如果是一列选择器，包装数组，嵌套values
      if (columns.length && !columns[0].values) {
        this.data.simple = true;
        return [{ values: columns }];
      }
      return columns;
    },
    // 给某列重新赋值
    setItemValues: function (index, options) {
      this.properties.value[index].values = options;
      var temp = this.properties.value;
      this.setData({
        value: temp
      })
    },
    // 取消
    onCancel(event) {
      this.setData({
        isShow: false,
      });
      this.triggerEvent("cancel", event.detail);
    },
    // 确认
    onSure(event) {
      this.setData({
        isShow: false,
      });
      this.triggerEvent("confirm", this.getPickerData());
    },
    // 滑动
    bindChange(event) {
      // 获取选中的index
      if (this.data.simple) {
        this.properties.defaultIndex = event.detail.value[0];
      } else {
        this.properties.defaultArray = event.detail.value;
      }
      this.triggerEvent("change", this.getPickerData());
    },
    // 选择器的数据
    getPickerData() {
      var _this = this;
      var values = _this.properties.value.map(function (item, index) {
        return item.values[_this.properties.defaultArray[index]];
      });
      if (_this.data.simple) {
        return { picker: _this, value: values[0], index: _this.properties.defaultIndex };
      } else {
        return { picker: _this, value: values, index: _this.properties.defaultArray };
      }
    },
    clickOverlay() {
      // 关闭
      this.triggerEvent("clickOverlay", this);
    }
  },
});
